<template>
  <div class="dashboard-container">
    <div class="info-container">
      <el-card class="box-card">
        <div slot="header" class="card-header">
          <span>管理员名称</span>
        </div>
        <div class="card-text-1">
          {{ name||'匿名' }}
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="card-header">
          <span>用户数</span>
        </div>
        <div class="card-text-2">
          <countTo :start-val="0" :end-val="systemInfo.userTotal" :duration="3000" />
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="card-header">
          <span>评论数</span>
        </div>
        <div class="card-text-3">
          <countTo :start-val="0" :end-val="systemInfo.commentTotal" :duration="3000" />
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="card-header">
          <span>博客数</span>
        </div>
        <div class="card-text-4">
          <countTo :start-val="0" :end-val="systemInfo.blogTotal" :duration="3000" />
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="card-header">
          <span>总标签</span>
        </div>
        <div class="card-text-5">
          <countTo :start-val="0" :end-val="systemInfo.tagTotal" :duration="3000" />
        </div>
      </el-card>
    </div>
    <div
      v-loading="loading"
      class="timeline-box"
      element-loading-text="加载时间线..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="#fff"
    >
      <div v-for="item in timelines" :key="item.month" class="timeline">
        <div class="timeline-title">{{ item.month }}</div>
        <el-timeline>
          <el-timeline-item v-for="ite in item.list" :key="ite.blogId" type="primary" size="large" icon="el-icon-more" :timestamp="ite.createdTime" placement="top">
            <el-card>
              <h4>{{ ite.blogTitle }}</h4>
              <p>提交于 {{ ite.createdTime }} <span v-if="showAuthor" style="margin-left: 30px">发布人 <span style="color: #20a0ff" @click="toUserPage(ite)"><i class="el-icon-link" />{{ ite.nickname || '匿名' }}</span></span></p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import countTo from 'vue-count-to'
import adminApi from '../../api/admin'
import blogApi from '../../api/blog'
export default {
  name: 'Dashboard',
  components: { countTo },
  data() {
    return {
      systemInfo: {
        userTotal: 0,
        commentTotal: 0,
        blogTotal: 0,
        tagTotal: 0
      },
      timelines: [

      ],
      showAuthor: false,
      loading: true
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.getSystemInfo()
    this.$store.dispatch('user/getInfo').then((data) => {
      if (data.username === 'admin') {
        this.showAuthor = true
      }
      this.getTimeLine(data.username)
    })
  },
  methods: {
    toUserPage(ite) {
      if (ite.creater === 'admin') {
        this.$router.push({ path: '/user/admin' })
      } else {
        this.$router.push({ path: '/user/user' })
      }
    },
    getTimeLine(username) {
      blogApi.getTimeLine(username).then(res => {
        if (res.code === 200) {
          this.timelines = res.data
          this.loading = false
        } else {
          this.loading = false
        }
      }).catch(e => {
        this.loading = false
      })
    },
    getSystemInfo() {
      adminApi.getSystemInfo().then(res => {
        if (res.code === 200) {
          this.systemInfo = res.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  /*当页面宽度大于等于767px触发 不是手机端显示的css*/
  @media (min-width: 767px){
    .info-container{
      display: block;
    }
  }
  /*当页面宽度小于等于766px触发 手机端显示的css*/
  @media (max-width: 766px){
    .info-container{
      display: none !important;
    }
  }
  .el-timeline{
   padding: 0;
  }
  .timeline-box{
    width: 100%;
    min-height: 300px;
    .timeline{
      margin-top: 30px;
      .timeline-title{
        padding-bottom: 20px;
        color: #8c939d;
        font-weight: bold;
        font-size: 25px;
      }
    }
  }

@mixin card-text(){
  border-radius: 50%;
  height: 150px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  font-size: 25px;
  color: #8c939d;
  align-items: center;
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.info-container{
  display: flex;
  justify-content: space-between;
  flex-flow: row nowrap;
  .box-card{
    width: 200px !important;
    align-items: center;
    .card-header{
      height: 30px;
      font-size: 20px;
      font-weight: bold;
      color: #969ba4;
      display: flex;
      padding: 10px 0;
      justify-content: space-around;
      align-items: center;
    }
    .card-text{
      &-1{
        border: 10px solid rgba(255, 180, 69, 0.45);
        @include card-text;
      }
      &-2{
        border: 10px solid rgba(85, 255, 97, 0.45);
        @include card-text;
      }
      &-3{
        border: 10px solid rgba(255, 67, 89, 0.45);
        @include card-text;
      }
      &-4{
        border: 10px solid rgba(255, 24, 36, 0.45);
        @include card-text;
      }
      &-5{
        border: 10px solid rgba(61, 179, 255, 0.85);
        @include card-text;
      }
    }

  }
}
</style>
